<template>
  <div class="header_wrap">
    <div class="header_inner">
      <img class="header_logo" src="./../assets/logo.png" :alt="title" />
      <span class="title">统一资源</span>
      <span v-for="(item, idx) in menu" class="menu" :key="idx">{{ item }}</span>
    </div>
    <div class="header_end">
      <el-badge class="badge" value="37" type="primary">
        <i class="el-icon-message"></i>
      </el-badge>
      <el-badge class="badge" value="0">
        <i class="el-icon-bell"></i>
      </el-badge>
      <el-dropdown class="dropdown" trigger="click">
        <i class="el-icon-user"></i>
        <span class="el-dropdown-link">admin<i class="el-icon-caret-bottom el-icon--right" /> </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix">
            评论
            <el-badge class="mark" :value="12" />
          </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            回复
            <el-badge class="mark" :value="3" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      title: '管理系统',
      menu: ['xx资源0', 'xx资源1', 'xx资源2', 'xx资源3']
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss">
.header_wrap {
  width: 100%;
  height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 10px;

  .header_inner {
    flex: 1;
    display: flex;
    margin: 0 auto;
    align-items: center;

    .title {
      margin: 0 10px;
      color: #78849a;
    }
    .menu {
      margin: 0 10px;
      color: #b5bbc7;
      cursor: pointer;

      &:hover {
        color: #138cdd;
        text-decoration: underline;
      }
    }
    .header_logo {
      width: 30px;
    }
  }
  .header_end {
    padding-right: 30px;

    .badge {
      margin-right: 30px;
    }
    .dropdown {
      cursor: pointer;
    }
  }
}
</style>
